<template>
  <div style="display: flex; height: 100%; flex: 1;">
    <SearchTable ref="refSession" :columns="columns"  :config="config" :hide-header="false"
                 :hide-search="true" :pagination="pagination" :loadData="loadData">
      <template v-slot:toolHeader>
        <div style="display: flex; font-size: 14px; color: #484b55" v-if="sessionDetail">
          <span style="color: #234DE3;">会话创建时间：</span>
          <span style="color: #234DE3;">{{sessionDetail.sessionTime}}</span>
          <span style="margin-left: 32px; margin-right: 4px;">会话将在</span>
          <span style="color: red; margin-right: 4px;">{{sessionExpired}}</span>
          <span>后过期</span>
        </div>
        <div v-if="!sessionDetail && hasLoaded" style="font-size: 14px; color: #234DE3">
          当前用户未登录
        </div>
      </template>
    </SearchTable>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, ref} from "vue";
import {getUserSessionById} from "@/apis";
import {useStore} from "@/stores";
import {useCurrent} from "@/utils/UseCurrentFunc";
import SearchTable from "@/components/common/SearchTable.vue";

const refSession = ref();
const sessionDetail = ref();
const hasLoaded = ref(false);

const props = withDefaults(defineProps<{
  product?: boolean,
  entry: any,
}>(), {});

const {current} = useCurrent(props.entry.name);

const sessionExpired = computed(() => {
  let timeExpired = sessionDetail.value.sessionExpired;
  const days = Math.floor(timeExpired / (24 * 3600));
  timeExpired %= (24 * 3600);

  const hour = Math.floor(timeExpired / 3600);
  timeExpired %= 3600;
  const minute = Math.floor(timeExpired / 60);
  timeExpired %= 60;

  if (days && days > 0) {
    return `${days}天${hour}小时${minute}分${timeExpired}秒`;
  } else if (hour && hour > 0) {
    return `${hour}小时${minute}分${timeExpired}秒`;
  } else if (minute && minute > 0) {
    return `${minute}分${timeExpired}秒`;
  } else {
    return `${timeExpired}秒`;
  }
})

const loadData = async (params: any) => {
  if (!current().id) {
    return {
      code: 0,
      data: {
        current: 1,
        count: 0,
        total: 0,
        data: [],
      }
    }
  }

  sessionDetail.value = undefined;

  const store = useStore();
  const result: any = await getUserSessionById({
    userId: current().id,
    realmId: store.getCurrentRealms().id || 'default'
  });

  if (result && result.data) {
    sessionDetail.value = result.data;
    const details: any = result.data.details || [];
    if (details.length == 0) {
      sessionDetail.value = undefined;
    }
    return {
      code: 0,
      data: {
        current: 1,
        count: details.length,
        total: details.length,
        data: details,
      }
    }
  }

  hasLoaded.value = true;

  return result;
}

const refresh = () => {
  refSession.value?.refresh()
}

const config = ref<SearchConfig>({
  showSearch: false,
  title: '',
  toolMode: '',
  hidePageable: true,
  setting: {
    showMoreSearch: false,
    showMoreButton: false,
    disableMoreButton: true,
    tableToolRound: '0',
    tableToolBackground: '',
  },
  layout: {
    buttonSize: 'default',
    actionButtonSize: 'default',
    inputSize: 'default',
  },
});

const pagination = ref<Pagination>({
  current: 1,
  pageSize: 10,
  total: 0,
});

const columns = ref([
  {
    id: 'platformName',
    name: '平台名称',
    hideCol: true,
    show: true,
    canEdit: false,
  },
  {
    id: 'account',
    name: '登录账号',
    show: true,
    canEdit: false,
  },
  {
    id: 'peerIp',
    name: '登录IP',
    show: true,
    canEdit: false,
  },
  {
    id: 'clientName',
    name: '客户端',
    show: true,
  },
  {
    id: 'terminal',
    name: '登录终端',
    show: true,
  },
  {
    id: 'loginMode',
    name: '登录方式',
    show: true,
    tag: 'true',
    tagType: (tag: string) => { return tag && tag.startsWith('单点') ? '' : 'success'; },
    tagText: (tag: string) => { return tag; },
  },
  {
    id: 'loginTime',
    name: '登录时间',
    show: true,
    canEdit: false,
  },
  {
    id: 'accessExpire',
    name: '超时时间',
    show: true,
    canEdit: false,
  },
  // {
  //   id: 'lastRefreshTime',
  //   name: '刷新时间',
  //   show: true,
  //   canEdit: false,
  // },
]);

onMounted(() => {

})

defineExpose({
  refresh,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

</style>
